<template>
  <div class="profile-page">
    <!-- 头像区域 -->
    <div class="avatar-section">
      <!-- <img :src="userAvatar" alt="User Avatar"  /> -->
      <img src="../assets/logo.jpg" class="avatar">
    </div>
    <t-message theme="success" v-model="visible1"
      :offset="['10px', '16px']" :duration="5000"
      :content="message" />
    <t-dialog v-model:visible="isShowDialog1" title="真的要注销吗QAQ"
      content="30天内重新登录还可以视为放弃注销QAQ" cancel-btn="取消"
      confirm-btn="确认" @confirm="onConfirm1" @cancel="onCancel1">
    </t-dialog>

    <!-- 功能按钮区域 -->
    <div class="actions-section">
      <t-button theme="primary" @click="viewComments"
        class="action-button">报名情况</t-button>
      <t-button theme="primary" @click="logout"
        class="action-button">{{ loginState.logined ? "退出登录" : "点击登录" }}</t-button>
      <t-button v-if="loginState.logined" theme="primary"
        @click="deleteAccount"
        class="action-button">注销账号</t-button>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from '@/store/loginState'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  const loginState = useStore()
  const router = useRouter()
  // 用户头像URL 
  const isShowDialog1 = ref(false)
  const visible1 = ref(false)
  const message = ref("")

  const onConfirm1 = () => {
    isShowDialog1.value = false
    visible1.value = true
    message.value = "已提交注销申请TAT"
    setTimeout(() => {
      loginState.loginout()
      router.replace({
        name: "login"
      })
    }, 3000)

  }
  const onCancel1 = () => {
    isShowDialog1.value = false
  }

  // 退出登录 
  const logout = () => {
    // 实现退出登录逻辑 
    console.log(' 退出登录')
    if (loginState.logined) {
      loginState.loginout()
    } else {
      router.replace({
        name: "login"
      })
    }


  }

  // 注销账号 
  const deleteAccount = () => {
    // 实现注销账号逻辑 
    isShowDialog1.value = true
  }

  // 查看评论 
  const viewComments = () => {
    // 实现查看评论逻辑 
    if (loginState.logined) {
      router.push({
        name: "about"
      })
    } else {
      loginState.loginVisiableShow()
    }

  }

  // 判断是否登录过
</script>

<style scoped>
  .profile-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .avatar-section {
    margin-bottom: 20px;
  }

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .actions-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
</style>